<template>
    <div class="container ocarousel">
      <div class="tips-title">1.基础用法</div>
      <el-row :gutter="5">
        <el-col :span="8">
          <div class="tips-title-sub">底部的指示器hover触发翻页</div>
          <el-carousel height="150px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 style="line-height: 150px;">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="8">
          <div class="tips-title-sub">底部的指示器click触发翻页</div>
          <el-carousel trigger="click" height="150px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 style="line-height: 150px;">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="8">
          <div class="tips-title-sub">切换箭头 arrow="always/never"  一直显示/隐藏</div>
          <el-carousel :interval="5000" arrow="always" height="150px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 style="line-height: 150px;">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <div class="tips-title">2.指示器设置在容器外部</div>
      <el-carousel indicator-position="outside" height="280px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 style="line-height: 300px;">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
      <div class="tips-title">3.卡片化</div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3 style="line-height: 220px;">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
      <div class="tips-title">4.方向 <span class="tips-explain">direction="vertical"</span></div>
      <el-carousel height="200px" direction="vertical" :autoplay="false">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 style="line-height: 220px;">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
      <br><br><br>
    </div>
</template>
<script>
  export default {
    name: 'o-carousel',
    data() {
      return {}
    }
  }
</script>
<style>
  .ocarousel .el-carousel__item h3 {
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    margin: 0;
  }

  .ocarousel .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .ocarousel .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
